<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Button activeElement Test</title>

	<link rel="stylesheet" type="text/css" href="../../../build/fonts/fonts-min.css" />
	<link rel="stylesheet" type="text/css" href="../../../build/menu/assets/skins/sam/menu.css" />
	<link rel="stylesheet" type="text/css" href="../../../build/button/assets/skins/sam/button.css" />
	<link type="text/css" rel="stylesheet" href="../../../build/logger/assets/skins/sam/logger.css">
	
	<style type="text/css">

	    #button-example-form fieldset {

	        border: 2px groove #ccc;
	        margin: .5em;
	        padding: .5em;

	    }

	    #menubutton3menu,
	    #menubutton4menu {

	        position: absolute;
	        visibility: hidden;
	        border: solid 1px #000;
	        padding: .5em;
	        background-color: #ccc;

	    }

	    #button-example-form-postdata {

	        border: dashed 1px #666;
	        background-color: #ccc;
	        padding: 1em;

	    }

	    #button-example-form-postdata h2 {

	        margin: 0 0 .5em 0;
	        padding: 0;
	        border: none;

	    }

	</style>	

	<script type="text/javascript" src="../../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
	<script type="text/javascript" src="../../../build/container/container_core-min.js"></script>
	<script type="text/javascript" src="../../../build/menu/menu-min.js"></script>
	<script type="text/javascript" src="../../../build/element/element-min.js"></script>
	<script type="text/javascript" src="../../../build/button/button-min.js"></script>
	<script type="text/javascript" src="../../../build/dragdrop/dragdrop-min.js"></script>
	<script type="text/javascript" src="../../../build/logger/logger-min.js"></script>

	<script type="text/javascript">

		(function () {
		
			var Event = YAHOO.util.Event,
				Dom = YAHOO.util.Dom;


			Event.onDOMReady(function () {

				var logReader = new YAHOO.widget.LogReader();


				var oMenu = new YAHOO.widget.Menu("menu-1", { fixedcenter: true, visible: true });
				
				oMenu.addItems([
					"MenuItem 1",
					"MenuItem 2",
					"MenuItem 3",										
					]);
					
				oMenu.render(document.body);


				Event.on("text-field-1", "keydown", function (event) {

					YAHOO.log("keydown: " + Event.getCharCode(event));
				
				});

			});
	
		}());

	</script>

</head>

<body class=" yui-skin-sam">

<h1>Button activeElement Test</h1>
<p>Test case for <a href="http://yuilibrary.com/projects/yui2/ticket/2528245">bug 2528245</a>.</p>
<p>
Clicking on the text box when the Button's Menu is open should result in the Menu closing, 
the Button blurring and the text box being focused and becoming the activeElement.
After mousing down on the text box, it should have a black outline and 
should fire key events.  
</p>

<form id="button-example-form" name="button-example-form" method="post">

	<input type="text" id="text-field-1" name="text-field-1">

</form>

</body>
</html>